<template>
  <div class="fusion-player-container">
    <div class="player-box">
      <fusion-player
        v-if="!isFile"
        ref="player"
        :playUrl="playerMessage.url"
        :playToken="playerMessage.token"
        :playLive="playerMessage.isLive"
        :getStatus="getStatus"
        @throwError="throwError"
        :timeupdate="timeupdate"
      />
      <video v-else class="video" :src="playerMessage.url" autoplay controls></video>
    </div>
  </div>
</template>
<script lang="ts" setup>
  // 是不是静态视频文件
  const isFile = ref(false);
  // 播放器的ref
  const player: any = ref(null);
  // 当前播放信息
  const playerMessage = ref({
    url: '',
    isLive: true,
    token: 'tFqCqFg2NZfjDejZQ2ZHk3oXE12ysPeEQY4aBp1cYtTv/LYB9Vrvj0doML1ppUwI',
  });

  // 打开视频
  const openVideo = (videoObj: any) => {
    isFile.value = /\.mp4$/gi.test(videoObj.url);
    const newObj = { ...videoObj };
    newObj.url = videoObj.url.indexOf('http://') >= 0 ? videoObj.url : 'http://' + location.host + videoObj.url;
    playerMessage.value = { ...playerMessage.value, ...newObj };
  };

  // 播放
  const play = () => {
    player.value.play();
  };

  //暂停
  const pause = () => {
    player.value.pause();
  };

  //停止
  const close = () => {
    player.value.close();
  };

  //全屏
  const fullscreen = () => {
    player.value.fullscreen();
  };

  //截屏
  const screenshot = () => {
    player.value.screenshot();
  };

  //对外暴露暂停或播放状态
  const getStatus = (e) => e;

  const restartPlay = () => {};

  const throwError = (err) => {
    console.log('------err------', err);
  };
  //抛出当前视频时间
  const timeupdate = (val) => val;

  defineExpose({ openVideo, play, pause, close, fullscreen, screenshot, getStatus, restartPlay });
</script>
<style lang="less" scoped>
  .fusion-player-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;

    .player-box {
      width: 100%;
    }

    .video {
      height: 100%;
      width: 100%;
    }
  }
</style>
